<template>
    <view class="brand_detail_product-grid">
      <view class="brand_detail_product-item" v-for="item in products" :key="item.id">
        <view class="brand_detail_product-badge" @click="handleBuyClick(item)">
          <image class="brand_detail_badge-image"
            :src="badgeImage"
            mode="aspectFit"></image>
          <view class="brand_detail_badge-text">
            <view style="text-align: center;display: flex;justify-content:center;align-items:center;">  
              <text style="font-size: 20rpx;color: #D42A2A;">超值价￥</text>
              <text style="font-size: 28rpx;font-weight: 600;color: #D42A2A;">{{ item.online_price }}</text>
            </view>
            <view style="font-size: 20rpx;" class="brand_detail_badge-goumai" @click="handleBuyClick(item)">购买</view>
          </view>
        </view>
        <view class="brand_detail_product-image">
          <image :src="item.goods_image" mode="aspectFit"></image>
        </view>
        <view class="brand_detail_product-info">
          <text class="brand_detail_product-title">{{ item.goods_name }}</text>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    name: 'ProductGrid',
    props: {
      // 商品列表数据
      products: {
        type: Array,
        required: true,
        default: () => []
      },
      // 徽章图片
      badgeImage: {
        type: String,
        default: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734076937675bea09c0740.png'
      },
      // 购买按钮背景图
      buyButtonBg: {
        type: String,
        default: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734000679675ac02716d62.png'
      },
      // 商品卡片背景图
      cardBg: {
        type: String,
        default: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733997253675ab2c5cafff.png'
      }
    },
    emits: ['item-click'],
    methods:{
      handleBuyClick(item){
        uni.navigateTo({
          url: "/pages/mer/goods/details/details?id=" + item.id,
        });
      }
    }
  }
  </script>
  
  <style>
  .brand_detail_badge-goumai {
    background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734077254675beb46e9063.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 56rpx;
    height: 56rpx;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D42A2A;
  }
  
  .brand_detail_product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50rpx;
    padding: 30rpx;
  }
  
  .brand_detail_product-item {
    position: relative;
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733997253675ab2c5cafff.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    height: 408rpx;
  }
  
  .brand_detail_product-badge {
    position: absolute;
    left: 50%;
    bottom: -30rpx;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .brand_detail_badge-image {
    width: 256rpx;
    height: 64rpx;
  }
  
  .brand_detail_badge-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
  
    width: 216rpx;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  
  .brand_detail_badge-text text {
    font-size: 24rpx;
    color: #333;
    display: block;

  }
  
  .brand_detail_product-image {
    width: 100%;
  }
  
  .brand_detail_product-image image {
   width: 280rpx;
   height: 280rpx;
   border-radius: 16rpx;
  }
  
  .brand_detail_product-info {
    margin-top: 20rpx;
    text-align: center;
  }
  
  .brand_detail_product-title {
    font-size: 28rpx;
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }
  </style>
  